<template>
  <div class="container">
    <div class="header">
      <el-button type="primary" size="mini" @click="startSubmitDrugInfo">新增药品</el-button>
      <el-button type="success" size="mini" @click="exportDrugToCsv">导出药品</el-button>
    </div>
    <div class="table-area">
      <el-table
          :data="drugList"
          border
          stripe
          style="width: 100%">
        <el-table-column
            prop="cover"
            label="药品封面">
          <template slot-scope="scope">
            <img :src="scope.row.cover" alt="" style="width: 100px; height: 100px;">
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="药品名称">
        </el-table-column>
        <el-table-column
            prop="approvalNumber"
            label="批准文号">
        </el-table-column>
        <el-table-column
            prop="producer"
            label="生产企业">
        </el-table-column>
        <el-table-column
            prop="ingredient"
            label="成分">
        </el-table-column>
        <el-table-column
            prop="character"
            label="性状">
        </el-table-column>
        <el-table-column
            prop="guidance"
            label="用药指导">
        </el-table-column>
        <el-table-column
            prop="sideEffects"
            label="副作用">
        </el-table-column>
        <el-table-column
            prop="introduction"
            label="简介">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="startUpdateInfo(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteDrug(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
        :title="dialogTitle"
        :visible.sync="showAddDrug"
        width="30%">
      <el-form ref="form" :model="drugForm" label-width="auto">
        <el-form-item label="药品名称">
          <el-input v-model="drugForm.name" placeholder="请输入药品名称"></el-input>
        </el-form-item>
        <el-form-item label="批准文号">
          <el-input v-model="drugForm.approvalNumber" placeholder="请输入批准文号"></el-input>
        </el-form-item>
        <el-form-item label="生产企业">
          <el-input v-model="drugForm.producer" placeholder="请输入生产企业"></el-input>
        </el-form-item>
        <el-form-item label="成分">
          <el-input v-model="drugForm.ingredient" placeholder="请输入药品成分"></el-input>
        </el-form-item>
        <el-form-item label="性状">
          <el-input v-model="drugForm.character" placeholder="请输入药品性状"></el-input>
        </el-form-item>
        <el-form-item label="用药指导">
          <el-input v-model="drugForm.guidance" placeholder="请输入用药指导"></el-input>
        </el-form-item>
        <el-form-item label="副作用">
          <el-input v-model="drugForm.sideEffects" placeholder="请输入幅作品"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input resize="none" type="textarea" v-model="drugForm.introduction" placeholder="请输入简介"></el-input>
        </el-form-item>
        <el-form-item label="药品封面">
          <el-upload
              ref="coverUpload"
              :on-success="handleCoverSuccess"
              :limit="1"
              accept=".jpg, .png, .jpeg"
              drag
              action="https://yiyuy.mynatapp.cc/info/imageToOSS">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将药品封面拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddDrug = false">取 消</el-button>
        <el-button type="primary" @click="submitDrugInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {addDrugInfo, deleteDrugInfo, getAllDrugInfo, updateDrugInfo} from "@/api/drug";

export default {
  name: 'DrugManagement',
  data() {
    return {
      dialogTitle: '',
      isAdd: false,
      showAddDrug: false,
      drugList: [],
      drugForm: {
        id: '',
        name: '',
        approvalNumber: '',
        producer: '',
        ingredient: '',
        character: '',
        guidance: '',
        sideEffects: '',
        introduction: '',
        cover: '',
      }
    }
  },
  methods: {
    exportDrugToCsv() {
      // 创建一个隐藏的<a>元素
      let link = document.createElement('a');
      link.style.display = 'none';
      document.body.appendChild(link);

      // 通过 Flask 的路由来获取文件路径
      link.href = 'https://yiyuy.mynatapp.cc/drug/exportDrug';
      link.download = this.csvFilename;

      // 模拟点击事件来触发文件下载
      link.click();

      // 移除创建的<a>元素
      document.body.removeChild(link);
    },
    deleteDrug(id) {
      this.$confirm('此操作将永久删除该该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDrugInfo(id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getDrugList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    startUpdateInfo(row) {
      this.dialogTitle = '修改药品信息'
      this.drugForm = row;
      this.isAdd = false;
      this.showAddDrug = true;
    },
    startSubmitDrugInfo() {
      this.dialogTitle = '添加药品信息';
      this.isAdd = true;
      this.showAddDrug = true;
      this.drugForm = {
        name: '',
        approvalNumber: '',
        producer: '',
        ingredient: '',
        character: '',
        guidance: '',
        sideEffects: '',
        introduction: '',
        cover: '',
      }
    },
    getDrugList() {
      getAllDrugInfo().then(res => {
        this.drugList = res.data;
      })
    },
    handleCoverSuccess(response, file, fileList) {
      this.drugForm.cover = response.data;
      this.$message.success('文件上传成功');
    },
    submitDrugInfo() {
      if (this.isAdd) {
        addDrugInfo(this.drugForm).then(res => {
          this.$message.success('药品信息添加成功');
          this.getDrugList();
        })
      } else {
        updateDrugInfo(this.drugForm).then(res => {
          this.$message.success('药品信息更新成功');
          this.getDrugList();
        })
      }
      this.showAddDrug = false;
      this.drugForm = {
        name: '',
        approvalNumber: '',
        producer: '',
        ingredient: '',
        character: '',
        guidance: '',
        sideEffects: '',
        introduction: '',
        cover: '',
      }
      this.$refs.coverUpload.clearFiles()
    }
  },
  mounted() {
    this.getDrugList();
  }
}
</script>

<style lang="less" scoped>
@keyframes MoveIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  animation: MoveIn .7s cubic-bezier(.4, 0, .2, 1);

  .header {
    display: flex;
  }

  .table-area {
    flex: 1;
    margin-top: 10px;
    overflow-y: auto;
  }

  .table-area::-webkit-scrollbar {
    display: none;
  }
}
</style>